<template>
    <div class="CorporateCom">
        <div style="display:flex;justify-content:space-between;padding-right:15px;">
            <div class="title">沟通管理-企业沟通</div>
            <div class="search-g" @keyup.enter.exact="clickSearch">
                <el-input v-model="searchCompanyName" maxlength="32" placeholder="企业名称"></el-input>
                <el-button @click="clickSearch">查询</el-button>
            </div>
        </div>
        <div class="content">
            <!--left-->
            <el-scrollbar class="Corporleft">
                <div v-for="(t,i) in companies" :key="i"
                     class="Corporleft_Box"
                     :class="{'Corporleft_Box_active':activeCompany===i,'Corporleft_Box_normal':activeCompany!==i}"
                     @click="doChat(i)">
                    <img class="userImg" :src="t.image" alt="">
                    <div class="right-group">
                        <div class="name"
                             :class="{'name_active':activeCompany===i,'name_normal':activeCompany!==i}">
                            {{formatLeftName(t.name)}}
                        </div>
                        <div class="bottom-group">
                            <div class="hr">{{t.hrName}}</div>
                            <div class="time">{{new Date(t.time).format('MM-dd')}}</div>
                            <div v-if="t.unreadQ" class="red_dot"></div>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
            <!--right-->
            <div class="CorporR_box" v-if="activeCompany>-1">
                <div class="CorporRight">
                    <div class="communi">
                        <div class="comleft">
                            <div class="left-g">
                                <div style="margin-left:15px;font-size:16px;font-weight: 700 ">
                                    {{companies[activeCompany].name}}
                                </div>
                                <div style="margin-left: 20px">{{companies[activeCompany].hrName}}</div>
                                <div style="margin-left: 15px">{{companies[activeCompany].phone}}</div>
                            </div>
                            <div class="right-g">
                                <div>{{companies[activeCompany].num}}</div>
                                <div style="margin-left: 15px;margin-right: 15px">|</div>
                                <div style="margin-right: 15px">{{companies[activeCompany].type}}</div>
                            </div>

                        </div>
                        <div v-if="false" class="icon_list " @click="doJoblist"></div>
                    </div>
                    <RecordList
                            :who="'2'"
                            :comm-id="commInfo.commId"
                            :to-id="commInfo.toId"
                            :create-time="commInfo.time"
                            ref="recordList"
                            style="width: 100%;height: calc(100% - 62px);"
                    >

                    </RecordList>
                </div>
                <div class="CorporRB" @keyup.enter.exact="doSend" @keyup.ctrl.enter.exact="addNewLine">
                    <el-input maxlength="400" placeholder="输入文字，最多400字" type="textarea" class="CorporCont"
                              style="width: calc(100% - 65px);height: calc(100% - 48px);margin-left: 15px;margin-top: 5px"
                              v-model="chatCont">
                    </el-input>
                    <div style="color:#999;position:absolute;bottom: 15px;right: 130px;">按Ctrl+Enter换行，Enter发送</div>
                    <el-button @click="doSend">发送
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import RecordList from '../comm/RecordList'
  import _g from '../../assets/utils/http'
  import * as _ from 'underscore'
  import _subject from '../../assets/utils/subject'
  import comm from '@/assets/utils/comm'

  export default {
    name: 'CorporateCom',
    components: { RecordList },
    data() {
      return {
        searchCompanyName: '',
        chatCont: '',
        companies: [
          { image: require('@/assets/logo.png'), name: '行星轮武汉科技有限公司3', time: '04-17' }
        ],
        activeCompany: -1,
        wsSub: null
      }
    },
    computed: {
      //连接信息
      commInfo() {
        if (this.activeCompany > -1) {
          comm.toIcon = this.companies[this.activeCompany].image
          return {
            commId: this.companies[this.activeCompany].commId,
            toId: this.companies[this.activeCompany].toId,
            time: this.companies[this.activeCompany].time
          }
        } else {
          comm.toIcon = null
          return {
            commId: 0,
            toId: 0,
            time: 0
          }
        }
      }
    },
    methods: {
      loadCommList() {
        this.activeCompany = -1
        this.lAxios({
          method: 'post', //方法
          url: '/platform/selectComListByPlatfromId.do',
          params: { state: 1, companyName: this.searchCompanyName.trim(), jobName: '', talentName: '' }
        }).then(res => {
          res = res.data
          if (res && res.status === 0) {
            console.log('company comm list server', res.data)
            this.companies = _.map(res.data, o => {
              return {
                image: _subject.getCompanyIcon(o.head),
                name: o.name,
                hrName: o.userName ? o.userName : 'HR未知',
                time: Date.parse(o.lastComtime),
                phone: o.phone,
                num: o.num + '个职位',
                type: o.comType ? o.comType : '企业类型未知',
                commId: o.id,
                toId: o.toId,
                unreadQ: o.unreadType === 'platform' ? o.unread > 0 : false
              }
            })
            if (this.$route.query.company) {
              this.activeCompany = _.findIndex(this.companies, t => {
                return Number(t.toId) === Number(this.$route.query.company)
              })
            }
            console.log('company comm list local', this.companies)
          }
        })
      },
      clickSearch() {
        this.loadCommList()
      },
      formatLeftName(t) {
        return _subject.truncate(t, 9)
      },
      onNewMessage(commId, unread) {
        if (unread) {
          const exist = _.find(this.companies, t => {
            return t.commId === commId
          })
          if (exist) {
            exist.unreadQ = true
          }
        }
      },
      doJoblist() {
        this.$router.push('/Joblist')
      },
      addNewLine() {
        this.chatCont += '\n'
      },
      doSend() {
        this.$refs.recordList.sendText(this.chatCont)
        this.chatCont = ''
        this.handleKeyup()
      },
      doChat(i) {
        this.activeCompany = i
        this.companies[i].unreadQ = false
      },
      // 键盘事件
      handleKeyup(event) {
        const e = event || window.event || arguments.callee.caller.arguments[0]
        if (!e) return
        const { key, keyCode } = e
      }
    },
    created() {
      this.loadCommList()
      //订阅消息
      let self = this
      this.wsSub = _subject.ws.subscribe({
        next(t) {
          console.log('new company ws message', t)
          if (t.status === 200) {
            let m = t.data.type
            if (m === 'SINGLE_SENDING') {
              let commId = t.data.comid
              self.onNewMessage(Number(commId), Number(t.data.unread))
            }
          }
        }
      })
    },
    destroyed() {
      if (this.wsSub) {
        this.wsSub.unsubscribe()
      }
    },
    mounted() {
      // window.addEventListener('keyup', this.handleKeyup)
    }
  }
</script>

<style lang="scss" scoped>

    .CorporateCom {
        width: 98%;
        height: fit-content;
        background-color: #F7F9FC;
        font-size: 12px;
        padding-left: 20px;
        /*border: 1px solid blue;*/
        padding-bottom: 20px;

        .search-g {
            display: flex;
            align-items: center;

            .el-input {
                .el-input__inner {
                    width: 100%;
                    height: 100%;
                    border: 1px solid;
                }
            }

            .el-button {
                margin-left: 15px;
                color: white;
                background: #199ed8;
            }
        }
    }

    .title {
        height: 40px;
        line-height: 40px;
    }

    .content {
        display: flex;
        flex-direction: row;
        height: calc(100vh - 160px);
        /*border:2px solid red;*/
    }

    .Corporleft {
        width: 20%;
        height: 100%;
    }

    .CorporRight {
        width: 100%;
        height: calc(100% - 140px);
        /*border: 1px solid black;*/
        /*border:2px solid yellow;*/
        background-color: white;
    }

    .Corporleft_Box {
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;

        .userImg {
            width: 50px;
            height: 50px;
            margin-left: 15px;
            flex-shrink: 0;

            img {
                width: 100%;
                height: 100%;
            }

        }

        .right-group {
            height: 100%;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            box-sizing: border-box;
            margin-left: 10px;
            padding-top: 10px;
            padding-bottom: 10px;

            .name {
                margin-right: 15px;
                font-size: 16px;
            }

            .name_active {
                color: #3377FF;
                font-weight: 700;
            }

            .name_normal {
                color: #333333;
                font-weight: 400;
            }

            .bottom-group {

                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                position: relative;

                .hr {
                    font-size: 14px;
                }

                .time {
                    font-size: 12px;
                    color: #949494;
                    margin-right: 25px;
                }

                .red_dot {

                    width: 14px;
                    height: 14px;
                    background: red;
                    border: 1px solid red;
                    border-radius: 50%;

                    position: absolute;
                    right: 5px;
                    bottom: 0;
                }
            }
        }
    }

    .Corporleft_Box:hover {
        background: rgba(247, 249, 252, .8);
    }

    .Corporleft_Box_active {
        background: rgba(238, 240, 253, 1);
        border-left: 3px solid #3377FF;
    }

    .Corporleft_Box_normal {
        background: white;
        border-left: 3px solid transparent;
    }

    .CorporR_box {
        width: 78%;
        height: 100%;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        /*border:2px solid red;*/
    }

    .CorporRB {
        width: 100%;
        height: 140px;
        border-top: 2px solid #f7f7f7;
        background-color: white;
        position: relative;
    }

    .CorporRB > button {
        width: 72px;
        height: 28px;
        background: white;
        border-radius: 25px;
        padding: 0;
        position: absolute;
        right: 50px;
        bottom: 10px;
    }

    .communi {
        width: 100%;
        height: 60px;
        background-color: #f7f9fc;
        display: flex;
        flex-direction: row;
        align-items: center;
        border: 1px solid white;
    }

    .comleft {
        width: 100%;
        height: 51px;
        line-height: 51px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /*border: 1px solid red;*/
        font-size: 14px;

        .left-g {
            display: flex;
        }

        .right-g {
            display: flex;
        }
    }

    .empty {
        width: 90%;
        height: 1px;
        margin-left: 5%;
        background-color: #CCC;
        position: absolute;
        bottom: 5px;
    }

    .icon_list {
        width: 22px;
        height: 22px;
        padding: 1px;
        /*border:1px solid red;*/
        margin-left: 50px;
        background: url("../../assets/imgs/communication/list.png") no-repeat center center;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;

        img {
            width: 100%;
        }
    }

    .CorporCont {
        font-size: 14px;
    }


</style>
